<script setup lang="ts">
import { reactive } from 'vue'
import { ChevronDown20Regular, QuestionCircle20Regular } from '@vicons/fluent'
import { Icon } from '@vicons/utils'

// 外部参数
// const props = defineProps({
//   // 是否手机模式
//   isMobile: {
//     type: Boolean,
//     required: true,
//   },
// })

// 设置参数
const setting = reactive({
  options: [
    {
      label: '中文',
      value: '中文',
    },
    {
      label: 'English',
      value: 'English',
    },
  ],
})

// 设置值
const value = reactive({
  options: '中文',
  tags: [],
  active: false,
})

// 关闭页面时调用
const onClose = () => {
  console.log('close common')
}

defineExpose({
  onClose,
})
</script>

<template>
  <div>
    <div class="mb-3">
      <a-alert message="功能未实装" type="warning" />
    </div>
    <n-list bordered>
      <n-list-item>
        <n-thing description="设置示例：选择"></n-thing>
        <template #suffix>
          <n-popselect v-model:value="value.options" :options="setting.options" trigger="click">
            <n-button type="default" size="small" icon-placement="right" text>
              <template #icon>
                <Icon><ChevronDown20Regular /></Icon>
              </template>
              {{ value.options }}
            </n-button>
          </n-popselect>
        </template>
      </n-list-item>
      <n-list-item>
        <n-thing description="设置示例：切换"></n-thing>
        <template #suffix>
          <n-radio-group size="small" v-model:value="value.options">
            <n-radio-button
              v-for="item in setting.options"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </n-radio-group>
        </template>
      </n-list-item>
      <n-list-item>
        <n-thing>
          <template #description>
            <div class="flex justify-between">
              <a-tooltip trigger="hover" placement="topLeft">
                <div class="cursor-help flex items-center">
                  <span>设置示例：标签</span>
                  <Icon class="ml-1"><QuestionCircle20Regular /></Icon>
                </div>
                <template #title> 说明文本 </template>
              </a-tooltip>
              <div class="flex justify-end items-center w-[200px]">
                <n-dynamic-tags size="small" v-model:value="value.tags" />
              </div>
            </div>
          </template>
        </n-thing>
      </n-list-item>
      <n-list-item>
        <n-thing description="设置示例：开关"></n-thing>
        <template #suffix>
          <n-switch v-model:value="value.active" size="small"></n-switch>
        </template>
      </n-list-item>
    </n-list>
  </div>
</template>

<style lang="scss" scoped></style>
